<template>
  <div class="home">
    <Topnav titleTxt="测试"></Topnav>
    <img alt="Vue logo" src="../assets/logo.png" />
  </div>
</template>

<script>
import Topnav from "@/components/TopNav.vue";
export default {
  components: {
    Topnav
  },
  created() {
    console.log("父组件created");
  },
  mounted() {
    console.log("父组件mounted");
  }
};
// 结论：
// 子组件:有scoped 父组件：没有scoped
// 1，子组件有scoped而父组件没有scoped，子组件的样式会受父组件的影响
// 2，在父子组件中，针对同样的选择器修改样式，在权重相同的情况下，优先使用子组件的样式，当父组件的权重大于子组件，以父组件的为准

// 子组件:有scoped 父组件：有scoped
// 1,父组件只能影响子组件的根节点的样式
// 2，在vant-ui中如果想更改组件的样式，若修改后没有效果，可以在选择器前面添加一个属性，穿透组件，进入到内部，/deep/
</script>
<style lang="less" scoped>
.home {
  .nav {
    .title {
      color: red;
    }
  }
}
</style>
